<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
	<link href="/loading/loading.css" rel="stylesheet">
	<link href="/css/dlg.css" rel="stylesheet">
	<link href="/confirm/jquery-confirm.css" rel="stylesheet">
	<style type="text/css">
	table th {text-align: center;}
	table tr td,table tbody tr td, table thead tr th{vertical-align: center;}
		body{
			padding:0px;
			margin:0px;
		}
		.wrapper{
			display: flex;
			width:100%;
		}
		.menu{
			width:200px;
			background:#4747d8;
		}
		.menu ul{
			padding:0;
			margin:0;
		}
		.menu ul li{
			list-style: none;
			padding:10px 20px;
			color:#ffffff;
			font-weight: bold;
			cursor: pointer;
		}
		.menu ul li a{
			display:inline-block;
			width:100%;
			height:100%;
			text-decoration: none;
			color:#ffffff;
		}
		.content{
			flex: 1;
			padding:10px;
		}
		.content input[class=form-control]{
			width:20%;
			display:inline-block;
		}
		.content .search{
			border:1px #e8e8e8 solid;
			padding: 10px;
			box-shaow:2px 2px 5px #e8e8e8;
		}
		.section{
			display:inline-block;
		}
		.section select{
			display:inline-block;
			width:30%;
			line-height:30px;
			border-radius:4px;
		}
	</style>
</head>
<body>
	<div class="container-fluid">
		<div class="row" style="height:10vh;background:#7474ec">
			<div class="col-md-12">
			</div>
		</div>
		<div class="row" style="height:90vh">
			<div class="wrapper" style="height:90vh">
				<div class="menu">
					<ul>
						<li th:each="menu : ${session.menus}">
							<a th:href="${menu.menuUrl}"><span th:text="${menu.menuName}"></span></a>
						</li>
					</ul>
				</div>
				<div class="content" style="position: relative;">
					<div class="search">
						<!-- <label for="title">标题：</label> -->
				    	<input type="text" class="form-control" name="title" id="title" placeholder="输入标题">
						<!-- <label for="type">类型：</label> -->
				    	<select id="firstType" style="display:inline-block;width:10%" class="form-control" onchange="typeChange()">
				    		<option value="">类型</option>
				    		<option th:each="type : ${types}" th:value="${type.id}" th:text="${type.typeName}"></option>
				    	</select>
				    	<select id="secondType" style="display:inline-block;width:10%" class="form-control">
				    		<option value="">二级类型</option>
				    	</select>
						<label for="section">地区：</label>
						<div id="section" class="section">
						  <select id="province" class="form-control"></select>
						  <select id="city" class="form-control"></select>
						  <select id="county" class="form-control"></select>
						</div>
						<!-- <label for="status">状态：</label> -->
						<select id="status" class="form-control" style="width:10%;display: inline-block">
							<option value="">状态</option>
							<option value="0">未通过</option>
							<option value="1">已通过</option>
							<option value="2">未审核</option>
						</select>
						<input class="btn btn-default" type="button" onclick="search()" value="查询">
					</div>
					<div id="list"></div>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/province/distpicker.data.min.js"></script>
<script type="text/javascript" src="/province/distpicker.min.js"></script>
<script type="text/javascript" src="/confirm/jquery-confirm.js"></script>
<script type="text/javascript" src="/js/dlg.js"></script>
<script type="text/javascript">
var pageNum = 1;
function posts(size, num){
	pageNum = num;
	var data = {
		title: $('#title').val(),
		type: $('#type').val(),
		province: $('#province').val(),
		city: $('#city').val(),
		county: $('#county').val(),
		status:$('#status').val(),
		firstId: $('#firstType').val(),
		secondId: $('#secondType').val(),
		pageSize: size,
		pageNum: num
	}
	showLoading();
	$.ajax({
		url:'/post/list',
		data:data,
		type:'post',
		success: function(html){
			$('#list').html(html);
			closeLoading();
		}
	})
}
function search(){
	posts(20,1);
}
function prePage(pageNum,total){
	var p = pageNum - 1;
	if(p < 1){
		return false;
	}
	posts(20,p);
	
}
function nextPage(pageNum,total){
	var read = pageNum * 20;
	if(read >= total){
		return false;
	}
	var p = pageNum + 1;
	posts(20,p);
}
function examinePost(id,status){
	showLoading("正在处理...");
	$.ajax({
		url:'/post/examine',
		data:{
			id: id,
			postStatus: status
		},
		type:'post',
		success: function(res){
			closeLoading();
			if(res !== 'success'){
				alert('审核失败，请重试！');
				return false;
			} else{
				if(status === 1){
				$('#'+id).html('已通过');
					
				}else{
					
				$('#'+id).html('未通过');
				}
			}
		}
	})
}
function delPost(id){
	$.confirm({
		title: '删除类型',
	    content: '确认删除吗？',
	    confirmButton: '确定',
	    cancelButton: '取消',
	    confirm: function(){
	    	showLoading("正在处理...");
			$.ajax({
				url:'/post/delete',
				data:{
					id: id
				},
				type:'post',
				success: function(res){
					closeLoading();
					if(res !== 'success'){
						alert('删除失败，请重试！');
						return false;
					}
					posts(20, pageNum);
				}
			}) 
	    },
	    cancel: function(){
	    }
	});
}
function typeChange(){
	var id = $('#firstType').val();
	if(id==null || id == ''){
		$('#secondType').empty();
		$('#secondType').append('<option value="">二级类型</option>');
		return false;
	}
	$.ajax({
		url:'/postType/secondType',
		data:{
			id: id
		},
		type:'post',
		dataType: 'json',
		success: function(res){
			$('#secondType').empty();
			$('#secondType').append('<option value="">二级类型</option>');
			res.forEach(function(v){
				$('#secondType').append('<option value=\"' + v.id + '\">' + v.typeName + '</option>');
			})
		}
	})
}
$(function(){
	$('#section').distpicker({
		autoSelect: false
	});
	posts(20,1);
})
</script>
